<template>
  <transition name="slideFromBottom" v-if="isshow">
    <div class="JoinBox loginContent">
      <div v-if="!result">
        <ul>
          <li style="border-top:1px solid #e5e5e5">
            <label>手机号：</label>
            <input class="no-style" type="text" v-model.trim="user.tel" ref="tel" required
                   pattern="(1[3|4|5|6|7|8|9])\d{9}"/>
          </li>
          <li>
            <label>验证码：</label>
            <input class="no-style" type="text" v-model.trim="user.code" ref="getedCode" required
                   style="width: 72%;margin-right:4%;"/>
            <v-SendCode :tel="user.tel"></v-SendCode>
          </li>
        </ul>
        <button class="custom" @click="join()">免费参加</button>
      </div>
      <div v-if="result" class="result">
        <div class="text-center" style="width:100%">
          <p>{{resultMsg}}</p>
          <p>{{resultMsg2}}</p>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
  import SendCode from '../logIn/sendCode'
  import {HttpRequest} from '../../common/js/httpFun'
  import {linklist} from '../../common/js/mockdata'
  import {verifyTel, AlertDialog} from '../../common/js/common'
  export default({
    props: {
      isshow: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        user: {
          'tel': '',
          'code': ''
        },
        'result': false,
        'resultMsg': '',
        'resultMsg2': ''
      }
    },
    methods: {
      join () {
        let vResult = verifyTel(this.user.tel)
        if (!vResult) {
          return false
        }
        if (this.$refs.getedCode.validity.valueMissing) {
          AlertDialog('错误', '请填写验证码')
          return false
        }
        let result = HttpRequest(linklist.jouneryUrl)
        result.then((response) => {
          console.log(response)
          if (response.status === 200) {
            this.result = true
            this.resultMsg = '非常抱歉，你朋友的免费名额已被抢光了！'
            this.resultMsg2 = ''
            /*
             let rlist = response.body
             if (rlist.code === 1) {
             this.resultMsg = '您已成功报名参加本次活动，请记得准时参加哦'
             this.resultMsg2 = ''
             }
             else {
             this.resultMsg = '非常抱歉，你朋友的免费名额已被抢光了！'
             this.resultMsg2 = ''
             } */
            this.hideDialog()
          }
        }, (response) => {
          AlertDialog('警告', '报名失败，请稍后再试')
          this.hideDialog()
        }).catch((response) => {
          AlertDialog('警告', '报名失败，请稍后再试')
          this.hideDialog()
        })
      },
      hideDialog () {
        this.$emit('hideDialog')
      }
    },
    components: {
      'v-SendCode': SendCode
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../common/stylus/redifined.styl"
  @import "../logIn/index.styl"
  .JoinBox
    background #fff
    height cal(445) rem
    padding-top cal(30) rem
    padding-bottom cal(30) rem
    position fixed
    bottom 0
    z-index 101
    ul
      li
        margin-left cal(-25) rem
        margin-right cal(-25) rem
        padding-left cal(25) rem
        padding-right cal(25) rem
        setFontsize(14px)
        label
          width 2rem
    button.getCode
      setFontsize(12px)
    .result
      display flex
      align-items center
      height cal(445) rem
      background #f2f1ef
      margin-left cal(-25) rem
      margin-right cal(-25) rem
      margin-top -0.4rem
      margin-bottom -0.4rem
      p
        margin auto
        color #333
        setFontsize(15px)

</style>
